<template>
  <div class="albumDetail-con">
    <div class="albumDetail-main">
      <div class="albumDetail-head">
        <div class="albumDetail-img">
          <img :src="listDetail?.headurl" alt="" />
          <i class="albumDetail-img-icon"></i>
        </div>
        <div class="albumDetail-data">
          <h1 class="albumDetail-data-h">{{ listDetail?.dissname }}</h1>
          <div class="albumDetail-icon">
            <span>{{ listDetail?.nickname }}</span>
          </div>
          <ul class="albumDetail-info">
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
          </ul>
          <div class="albumDetail-btn">
            <div class="albumDetail-btn-item albumDetail-btn-active">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-play1"></span>
                播放全部
              </div>
            </div>
            <div class="albumDetail-btn-item">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-plus-square"></span>
                收藏
              </div>
            </div>
            <div class="albumDetail-btn-item">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-download"></span>
                评论
              </div>
            </div>
            <div class="albumDetail-btn-item">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-download"></span>
                更多
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="albumDetail-content">
        <div class="albumDetail-layout">
          <div class="albumDetail-mod-hd">
            <div class="albumDetail-mod-item">歌曲</div>
            <div class="albumDetail-mod-con">歌手</div>
            <div class="albumDetail-mod-time">时长</div>
          </div>
          <div
            class="albumDetail-mod-list"
            v-for="(song, index) in listDetail?.songlist.slice(0, 10)"
            :key="song.id"
          >
            <h1>{{ index + 1 }}</h1>
            <div class="albumDetail-mod-link">
              <div class="mod-link-left">
                <a href="#" class="mod-link-con">{{ song.title }}</a>
                <a href="#" class="albumDetail-link-conto">
                  <span>MV</span>
                </a>
              </div>
              <div class="albumDetail-link-right">
                <a>
                  <span
                    class="iconfont icon-play1"
                    @click="playMusicUrl(song.mid)"
                  ></span
                ></a>
                <a><span class="iconfont icon-plus"></span></a>
                <a><span class="iconfont icon-share"></span></a>
              </div>
            </div>
            <span class="albumDetail-text">{{
              song.singer.map((item) => item.name).join()
            }}</span>
            <div class="albumDetail-mod-name">04:51</div>
          </div>

          <div class="topList-page">
            <div class="topList-page-text">
              <p>查看更多内容，请下载客户端</p>
              <a href="#" class="topList-page-link">立即下载</a>
            </div>
          </div>
          <div class="topList-mod-comment">
            <div class="topList-mod-comment-text">
              <h1>评论<span>共xxx条评论</span></h1>
            </div>
            <div class="topList-mod-comment-input">
              <textarea
                name=""
                id=""
                cols="30"
                rows="10"
                placeholder="说说你的看法"
              ></textarea>
              <div class="topList-mod-comment-btn">发表评论</div>
            </div>
            <div class="topList-mod-comment-md">
              <h1>全部评论</h1>
              <ul class="comment-list">
                <li class="comment-item">
                  <div class="comment-wrap">
                    <a href="#">
                      <img
                        src="//thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTII6orxTxOu18A8qTKrjvv2tMyP4EzWBJGMgawnMAM3Qxlj7xJSTo4vepNhAEkRUD7lHUXluScFnA/132"
                      />
                    </a>
                    <div class="comment-right">
                      <h4>xxx</h4>
                      <div>xxx</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="albumDetail-text">
          <h1>简介</h1>
          <p>
            {{ listDetail?.desc }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'AlbumDetail',
}
</script>

<script lang="ts" setup>
import { getSongListsDetailApi } from '@/api/category/getSongLists'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'

import { useMusicPlayStore } from '@/stores/playlistStore'
import type { GetSongListsDetail_Cdlist_Type } from '@/api/category/model/getSongListsModel'

const playstore = useMusicPlayStore()

// 路由参数
const { params } = useRoute()
const listDetail = ref<GetSongListsDetail_Cdlist_Type>()
onMounted(async () => {
  const res = await getSongListsDetailApi(params.id as string)
  listDetail.value = res.cdlist[0]
  console.log(listDetail.value)
})
const playMusicUrl = (mid: string) => {
  playstore.getMusicPlay(mid)
}
</script>

<style scoped>
.albumDetail-con {
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
}

.albumDetail-img-icon {
  width: 300px;
  height: 266px;
  background: url(https://y.qq.com/ryqq/static/media/album_cover.c202f1da.png?max_age=2592000)
    0 0 no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}
.albumDetail-btn-item:hover .albumDetail-btn-ac {
  background-color: rgba(0, 0, 0, 0.3);
}
.albumDetail-content {
  display: flex;
}
.albumDetail-main {
  width: 1200px;
  margin: 0 auto;
}
.albumDetail-head {
  width: 100%;
  height: 250px;
  padding-top: 40px;
  display: flex;
}
.albumDetail-img {
  width: 250px;
  height: 250px;
  position: relative;
}
.albumDetail-img img {
  width: 100%;
  height: 100%;
}
.albumDetail-data {
  width: 800px;
  height: 250px;
  margin-left: 80px;
}
.albumDetail-data-h {
  font-size: 31px;
  font-weight: 400;
  margin-top: 10px;
  margin: 0;
}
.albumDetail-icon {
  height: 24px;
  font-size: 16px;
  margin: 5px 0;
}
.albumDetail-info {
  width: 520px;
}
.albumDetail-info li {
  display: inline-block;
  font-size: 14px;
  color: #000;
  height: 27px;
  line-height: 27px;
}
.albumDetail-info li:nth-of-type(odd) {
  width: 250px;
}
.albumDetail-info li:nth-of-type(even) {
  width: 166px;
}

.albumDetail-btn {
  margin-top: 10px;
}
.albumDetail-btn-item {
  width: 123px;
  height: 38px;
  display: inline-block;
  border: 1px solid #c9c9c9;
  margin-right: 10px;
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
  cursor: pointer;
}

.albumDetail-btn-ac {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
}
.albumDetail-btn-item:hover .topList-btn-ac {
  background-color: rgba(0, 0, 0, 0.3);
}
.albumDetail-btn-active {
  background-color: #31c27c;
  color: #fff;
}
.albumDetail-content {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}
.albumDetail-mod-hd {
  display: flex;
  width: 850px;
  height: 50px;
  line-height: 50px;
}

.albumDetail-mod-item {
  width: 556px;
  height: 50px;
  margin-left: 80px;
}
.albumDetail-mod-time {
  width: 556px;
  height: 50px;
  padding-left: 80px;
}
.mod-link-con {
  font-size: 14px;
}

.albumDetail-mod-con {
  width: 198px;
  height: 50px;
}

.albumDetail-mod-list {
  display: flex;
  width: 100%;
  height: 50px;
}

.albumDetail-mod-list h1 {
  width: 60px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

.albumDetail-mod-link {
  display: flex;
  height: 50px;
  width: 300px;
  line-height: 50px;
  justify-content: space-between;
}

.albumDetail-link-conto {
  border: 1px solid #31c37c;
  border-radius: 5px;
  text-align: center;
  width: 40px;
  height: 16px;
  margin-left: 5px;
  text-decoration: none;
}
.albumDetail-link-right {
  display: none;
}
.albumDetail-mod-list:hover .albumDetail-link-right {
  display: block;
}
.albumDetail-link-right a {
  width: 36px;
  height: 36px;
  border: 1px solid #999;
  margin: 0 auto;
  line-height: 36px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  margin-left: 10px;
}
.albumDetail-link-right a:hover {
  border: 1px solid #31c27c;
  color: #31c27c;
}
.albumDetail-text {
  width: 180px !important;
  line-height: 50px;
  text-align: left;
  padding-left: 15px;
  font-size: 14px;
}
.albumDetail-mod-name {
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: #999;
}
.albumDetail-text {
  width: 290px;
}
.topList-page {
  width: 100%;
  height: 80px;
  margin: 60px 0 20px;
}
.topList-page-text {
  width: 100%;
  height: 100%;
  text-align: center;
}
.topList-page-text p {
  font-size: 18px;
  color: #000;
}
.topList-page-text a {
  display: block;
  width: 175px;
  height: 41px;
  background-color: #31c27c;
  margin: 0 auto;
  color: #fff;
  font-size: 16px;
  line-height: 41px;
  border-radius: 41px;
  margin-top: 20px;
  text-align: center;
}
.topList-mod-comment {
  width: 990px;
}
.topList-mod-comment-text {
  width: 100%;
  height: 60px;
}
.topList-mod-comment-text h1 {
  font-size: 24px;
  font-weight: 400;
  color: #000;
}
.topList-mod-comment-text h1 span {
  font-size: 14px;
  padding-left: 10px;
  color: #999;
}
.topList-mod-comment-input textarea {
  border: none;
  background-color: #f5f5f5;
  width: 970px;
  height: 100px;
  padding-top: 20px;
  padding-left: 20px;
}
.topList-mod-comment-btn {
  color: #fff;
  text-align: center;
  line-height: 27px;
  margin-top: 10px;
  width: 80px;
  height: 27px;
  background-color: #31c27c;
  margin-left: 910px;
}
.topList-mod-comment-md {
  height: 100%;
}
.topList-mod-comment-md h1 {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #c9c9c9;
}
.comment-list {
  width: 100%;
}
.comment-item {
  width: 100%;
  height: 140px;

  /* background-color: red; */
}
.comment-item .comment-wrap {
  width: 914px;
  height: 113px;
  display: flex;
  padding-top: 20px;
}
.comment-item .comment-wrap a {
  display: block;
  width: 38px;
  height: 38px;
}
.comment-item .comment-wrap a img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.comment-item .comment-right {
  margin-left: 10px;
}
.comment-item .comment-right h4 {
  height: 26px;
  color: #999;
}
.comment-item .comment-right p {
  color: #999;
  margin-bottom: 10px;
}
.albumDetail-text p {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-size: 16px;
}
</style>
